<!-- 编辑弹窗 -->
<template>
  <el-dialog
    width="400px"
    :visible="visible"
    :lock-scroll="false"
    v-dialog-movable="false"
    custom-class="ele-dialog-form"
    :title="(isUpdate?'修改' : '添加') + '部门'"
    @update:visible="updateVisible"
    :close-on-click-modal="false">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      :size="defaultFormSize"
      @keyup.enter.native="save"
      @submit.native.prevent>
      <el-form-item label="上级部门:">
        <tree-select
          :options="department"
          v-model="form.ParentID"
          :normalizer="normalizer"
          :defaultExpandLevel="3"
          placeholder="请选择上级部门"/>
      </el-form-item>
      <el-form-item label="部门名称:" prop="Name">
        <el-input clearable v-model="form.Name" placeholder="请输入部门名称"/>
      </el-form-item>
      <el-form-item label="排序:" prop="Order">
        <el-input-number
          :min="0"
          :max="99999"
          :searchable="false"
          v-model="form.Order"
          placeholder="请输入排序号"
          controls-position="right"
          class="ele-fluid ele-text-left"/>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" :loading="loading" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import rules from '@/config/rules/department/save-department'

  export default {
    name: 'save-department',
    components: {
      TreeSelect
    },
    props: {
      // 弹窗是否打开
      visible: {
        type: Boolean,
        default: false
      },
      // 修改回显的数据
      data: {
        type: Object,
        default: () => {
          return {}
        }
      },
      // 部门列表
      department: {
        type: Array,
        default: () => {
          return [];
        }
      }
    },
    data() {
      return {
        // 表单数据
        form: this.initFormData(this.data),
        // 表单验证规则
        rules,
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false
      };
    },
    watch: {
      data() {
        this.isUpdate = !!(this.data && this.data.DepartmentID);
        this.form = this.initFormData(this.data);
      }
    },
    methods: {
      /* 保存编辑 */
      save() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            let requestUrl = this.isUpdate ? '/department/update' : '/department/create';
            this.$http.post(requestUrl, this.form).then(res => {
              this.loading = false;
              if (res.data.code === 200) {
                this.$message({type: 'success', message: res.data.msg});
                this.updateVisible(false);
                this.$emit('done');
                this.form = this.initFormData({});
              } else {
                this.$message.error(res.data.msg);
              }
            }).catch(e => {
              this.loading = false;
              this.$message.error(e.message);
            });
          } else {
            return false;
          }
        });
      },
      /* 下拉树格式化 */
      normalizer(d) {
        return {
          id: d.DepartmentID,
          label: d.Name,
          children: d.children || undefined
        };
      },
      /* 更新visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
      /* 初始化form数据 */
      initFormData(data = {}) {
        let form = Object.assign({
          Name: '',
          ParentID: 0,
          Order: 1,
        }, data);
        if (form.ParentID === 0) {
          form.ParentID = null
        }
        return form;
      },
    }
  }
</script>

<style scoped>

</style>
